<!--
 * @Description: 月/周计划列表筛选查看
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-12-29 15:14:27
 * @LastEditTime: 2022-12-30 10:40:34
 * @FilePath: \cscec-pms-admin\src\views\construction\constructionSchedule\components\PlanListFilter.vue
-->
<template>
  <BaseModal
    :visible="visible"
    :title="data.title"
    :width="1200"
    destroy-on-close
    :wrap-class-name="'plan-list-filter'"
    @cancel="handleModalCancel"
  >
    <a-table
      :columns="columns9"
      :data-source="tableData"
      bordered
      :pagination="false"
      :scroll="{
        x: 3390,
        y: 430
      }"
      :loading="loading"
    >
      <!-- 直接责任人 -->
      <template
        slot="directResPerList"
        slot-scope="text, record"
      >
        {{ record.directResPerList.map(el=>el.label).join(',') }}
      </template>
      <!-- 直接责任人 -->
      <!-- 是否关键线路节点--是否垂直运输设备装拆 -->
      <template
        v-for="item in ['isKeyNode','isMilestonesNode','isMainProcessNode','isVerticalTransportNode']"
        :slot="item"
        slot-scope="text, row"
      >
        <a-switch
          :key="item"
          v-model="row[item]"
          checked-children="是"
          un-checked-children="否"
          disabled
        />
      </template>
      <!-- 是否关键线路节点--是否垂直运输设备装拆 -->
    </a-table>
    <template slot="footer">
      <a-button @click="handleModalCancel">
        关闭
      </a-button>
    </template>
  </BaseModal>
</template>
<script>
import BaseModal from '@/components/BaseModal'
import { columns9 } from '../model.js'
import { plan } from '@/api/construction/constructionSchedule'
export default {
  name: 'PlanListFilter',
  props: {
    // 隐藏显示
    visible: {
      type: Boolean,
      require: true
    },
    // 月/周计划列表筛选数据
    data: {
      type: Object,
      require: true
    }
  },
  components: {
    BaseModal
  },
  data() {
    return {
      // 表头
      columns9,
      // 表格数据
      tableData: [],
      // 表格加载
      loading: false
    }
  },
  watch: {
    visible: {
      handler(v) {
        if (v) {
          this.$nextTick(() => {
            this.getTableData()
          })
        } else {
        }
      }
    }
  },
  methods: {
    /**
     * @description: 关闭模态框
     * @param {boolean} 是否需要刷新
     * @return {void}
     */
    handleModalCancel(refresh = false) {
      this.$emit('update:visible', false)
      if (refresh) {
        this.$emit('refresh', true)
      }
    },
    /**
     * @description: 获取表格数据
     * @return {void}
     */
    getTableData() {
      this.loading = true
      const { key, mode, id } = this.data
      const fun = mode === 'week' ? plan.weekPlanList : plan.monthPlanList
      const param = {}
      param[key] = true
      param[mode + 'PlanId'] = id
      fun(param)
        .then((res) => {
          if (res.code === this.SUCCESS_CODE) {
            this.tableData = res.data
          }
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="less" scoped>
.plan-list-filter {
  height: calc(var(--heightVh) * 0.6);
  overflow-y: auto;
  padding-right: 10px;
}
</style>
